<!-- 话题详情 -->
<template>
	<view class="detail">
		<view class="title">
			《围城》是钱钟书所著的长篇小说，是中国现 代文学史上一部风格独特的讽刺小说。
			<text v-for="item in texts">{{item}}</text>
		</view>

		<view class="content">
			<view class="header">
				<view class="left">
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/test.png"></image>
					<text>油条</text>
				</view>
				<view class="right">
					发起于<text>2022-06-27 12:55</text>
				</view>
			</view>

			<view class='text'>
				   由第一章至第四章是第一个单元，写方鸿渐在上海和家乡（江南某县）的生活情景，以写上海为主。在这个单元中，方鸿渐和苏文纨的“   由第一章至第四章是第一个单元，写方鸿渐在上海和家乡（江南某县）的生活情景，以写上海为主。在这个单元中，方鸿渐和苏文纨的“   由第一章至第四章是第一个单元，写方鸿渐在上海和家乡（江南某县）的生活情景，以写上海为主。在这个单元中，方鸿渐和苏文纨的“   由第一章至第四章是第一个单元，写方鸿渐在上海和家乡（江南某县）的生活情景，以写上海为主。在这个单元中，方鸿渐和苏文纨的“   由第一章至第四章是第一个单元，写方鸿渐在上海和家乡（江南某县）的生活情景，以写上海为主。在这个单元中，方鸿渐和苏文纨的“   由第一章至第四章是第一个单元，写方鸿渐在上海和家乡（江南某县）的生活情景，以写上海为主。在这个单元中，方鸿渐和苏文纨的“   由第一章至第四章是第一个单元，写方鸿渐在上海和家乡（江南某县）的生活情景，以写上海为主。在这个单元中，方鸿渐和苏文纨的“
			</view>

			<view class="imgs">
				<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/test.png"></image>
			</view>

		</view>

		<!-- 留言 -->
		<view class="language">
			<view class="photo">
				<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/myTopic/img4.png"></image>
				<text>精选留言</text>
			</view>

			<view class="tabs">
				<u-tabs
					@click="changeTabs"
					:list="tabs"
					lineWidth="30"
					lineHeight="7"
					:current="current"
					:lineColor="`url(${lineBg}) 100% 100%`"
					:activeStyle="{
							color: '#369CFE',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
							color: '#9A9A9A',
							transform: 'scale(1)'
					}"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 90rpx;"
				>
				</u-tabs>
			</view>

			<!-- 评论区 -->
			<Item :dataList="dataList"/>
		</view>

		<!-- 评论 -->
		<view class="comment">
			  <u--input
			    placeholder="评论千万条，友善第一条"
			    border="surround"
			    v-model="comment"
					shape="circle"
					clearable
			  ></u--input>
				<view class="right">我来说说</view>
		</view>

		<!-- 分享弹窗 -->
			<u-popup :show="showShare" @close="showShare = false" round="30">
				<view class="share_popup">
						<view class="pics">
							<view class="item" v-for="(item,index) in items" :key="index" @click="handle(item.text)">
								<image :src="item.url"></image>
								<text>{{item.text}}</text>
							</view>
						</view>
						<view class="line"></view>
						<view class="close" @click="showShare = false">取消</view>
				</view>
			</u-popup>

			<!-- 删除 -->
			<u-modal :show="showDel"  :title="'确认删除话题？'" @cancel="showDel = false" @confirm="showDel = false" showCancelButton>
					<view slot="default" class="delText">删除后不可恢复</view>
			</u-modal>

	</view>
</template>

<script>
	import Item from '../../modules/comment_item.vue';
	export default{
		components:{
			Item
		},
		onNavigationBarButtonTap(){
			this.showShare = true;
		},
		created(){
			this.dataList = this.test;
		},
		data(){
			return {
				texts:['#文学','书记分享#'],
				comment:'',//评论
				dataList:[],
				showDel:false,//删除
				showShare:false,//分享
				tabs:[
					{
						name:'最热'
					},
					{
						name:'最新'
					}
				],
				current:0,
				lineBg:"https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/myTopic/img5.png",
				test:[
					{
						url:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/test.png',
						name:'孤独症小男孩',
						isAuther:true,
						zan:645,
						content:'评论内容文字占位评论内容文字占位评论内容文字占位评论内容文字占位评论内容文字占位内容文字占位内容文字占位',
						time:"今天",
						ip:'成都',
						num:612,
						son:[
							{
								sonUrl:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/test.png',
								sonName:'孤独症小男孩2',
								sonContent:'评论内容文字占位评内容文字拷贝',
								sonTime:'昨天',
								sonIp:'北京'
							},
							{
								sonUrl:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/test.png',
								sonName:'孤独症小男孩2',
								sonContent:'评论内容文字占位评内容文字拷贝',
								sonTime:'昨天',
								sonIp:'北京'
							}
						]
					},
					{
						url:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/test.png',
						name:'孤独症小男孩',
						isAuther:false,
						zan:645,
						content:'评论内容文字占位评论内容文字占位评论内容文字占位评论内容文字占位评论内容文字占位内容文字占位内容文字占位',
						time:"今天",
						ip:'成都2',
						num:612,
						son:[
							{
								sonUrl:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/test.png',
								sonName:'孤独症小男孩2',
								sonContent:'评论内容文字占位评内容文字拷贝',
								sonTime:'昨天',
								sonIp:'北京'
							},
							{
								sonUrl:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/test.png',
								sonName:'孤独症小男孩2',
								sonContent:'评论内容文字占位评内容文字拷贝',
								sonTime:'昨天',
								sonIp:'北京'
							}
						]
					}
				],
				test2:[
					{
						url:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/test.png',
						name:'孤独症小男孩22',
						isAuther:true,
						zan:645,
						content:'评论内容文字占位评论内容文字占位评论内容文字占位评论内容文字占位评论内容文字占位内容文字占位内容文字占位',
						time:"今天",
						ip:'成都',
						num:612,
						son:[
							{
								sonUrl:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/test.png',
								sonName:'孤独症小男孩2333',
								sonContent:'评论内容文字占位评内容文字拷贝',
								sonTime:'昨天',
								sonIp:'北京'
							},
							{
								sonUrl:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/test.png',
								sonName:'孤独症小男孩2',
								sonContent:'评论内容文字占位评内容文字拷贝',
								sonTime:'昨天',
								sonIp:'北京'
							}
						]
					},
					{
						url:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/test.png',
						name:'孤独症小男孩',
						isAuther:false,
						zan:645,
						content:'评论内容文字占位评论内容文字占位评论内容文字占位评论内容文字占位评论内容文字占位内容文字占位内容文字占位',
						time:"今天",
						ip:'成都2',
						num:612,
						son:[
							{
								sonUrl:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/test.png',
								sonName:'孤独症小男孩2',
								sonContent:'评论内容文字占位评内容文字拷贝',
								sonTime:'昨天',
								sonIp:'北京'
							},
							{
								sonUrl:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/test.png',
								sonName:'孤独症小男孩2',
								sonContent:'评论内容文字占位评内容文字拷贝',
								sonTime:'昨天',
								sonIp:'北京'
							}
						]
					}
				],
				items:[
					{
						url:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/topic/img5.png',
						text:'微信好友'
					},
					{
						url:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/topic/img3.png',
						text:'朋友圈'
					},
					{
						url:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/topic/img2.png',
						text:'复制链接'
					},
					{
						url:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/topic/img1.png',
						text:'编辑'
					},
					{
						url:'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/mine/topic/img4.png',
						text:'删除'
					},
					{
						url:'',
						text:''
					}
				]
			}
		},
		methods:{
			changeTabs(e){
				this.dataList = e.index == 0? this.test : this.test2;
			},
			//删除事件
			delHandle(){
				this.showDel = true;
				this.showShare = false;
			},
			handle(text){
				if(text == '删除') this.delHandle();
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep  .u-tabs__wrapper__nav__line {
	    // left: 10rpx;
	}
	.detail{
		background-color: #F5F5F5;
		.delText{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		.share_popup{
			.close{
				padding:32rpx 0 34rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #1A1A1A;
			}
			.line{
				height: 20rpx;
				background: #F6F6F6;
			}
			.pics{
				padding:46rpx 74rpx 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				.item{
					margin-right:2rpx;
					width: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					image{
						width: 100rpx;
						height: 100rpx;
						margin-bottom:22rpx;
					}
				}
				.item:nth-of-type(1),.item:nth-of-type(2),.item:nth-of-type(3){
					margin-bottom:62rpx;
				}
			}
		}
		.language{
			padding:34rpx 32rpx 198rpx;
			margin-top:16rpx;
			background-color: #fff;
			.photo{
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #303030;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}
		}
		.comment{
			width: 100%;
			height: 134rpx;
			position: fixed;
			bottom:0;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:32rpx 34rpx 30rpx 32rpx;
			box-sizing: border-box;
			.right{
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #194FC9;
				margin-left:24rpx;
			}
		}
		.title{
			background-color: #fff;
			font-size: 34rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #161616;
			padding:40rpx 42rpx 36rpx 30rpx;
			border-bottom:2rpx solid #E9E9E9;
			text{
				color:#194FC9;
				margin-right:10rpx;
			}
		}
		.content{
			padding:30rpx 34rpx 48rpx;
			background-color: #fff;
			.header{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #969696;
				.left{
					display: flex;
					align-items: center;
					image{
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-right:18rpx;
					}
				}
				.right{
					text{
						margin-left:10rpx;
					}
				}
			}
			.text{
				margin-top:26rpx;
				text-indent:1em;
				line-height: 52rpx;
				color:#504D4D;
			}
			.imgs{
				width: 100%;
				height: 282rpx;
				margin-top:48rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
